<template>
  <div class="search-container">
      <!--
Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
看下边的图即可明白
-->
<!-- 
    show-action 取消的属性
    考虑到当输入框重新获取焦点时 用户还想继续搜索 这时隐藏搜索结果 显示搜索历史
 -->
      <form class="search-form" action="/">
        <van-search
            v-model="searchText"
            show-action
            background="#3296fa"
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
            @focus="isResultShow=false"
        />
      </form>
      <!-- 用插件将内容显示 有三部分 当isResultShow是true显示 不为true判断输入框是否有内容 有内容显示联想 没有显示历史记录 -->
      <!-- 搜索结果 将输入框内容传给子让子根据输入框的内容得出结果-->
        <search-result :search-text="searchText"  v-if="isResultShow"/>
        <!-- /搜索结果 -->
        <!-- 联想建议 传输入框的内容给子 -->
        <search-suggestion 
        :search-text="searchText" 
        v-else-if="searchText"
        @search="onSearch"
        />
        <!-- /联想建议 -->
       <!-- 搜索历史记录 思想让本地存储进行操作  将搜索数据传递到子组件中 -->
        <search-history 
        :search-histories="searchHistories" 
        v-else
        @clear-search-history="searchHistories = []"
        @search="onSearch"
        />
        <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import SearchResult from './components/search-result'
// 数据持久化
import {setItem,getItem} from '../../utils/storage'
  export default {
    name: "SearchIndex",
    components: {
        SearchHistory,
        SearchSuggestion,
        SearchResult
    },
    props: {},
    data() {
      return {
            isResultShow:false,//搜索结果是否展示
            searchText: '',//输入框的内容
            searchHistories: getItem('TOUTIAO_SEARCH_HISTORIES') || [],//搜索历史记录
      };
    },
    computed: {},
    watch: {
        searchHistories(value){
            // 同步到本地存储
            setItem('TOUTIAO_SEARCH_HISTORIES',value)
        }
    },
    created() {},
    methods: {
        onSearch(val) {//输入搜索关键字，敲回车之后触发搜索事件
            this.searchText=val
             // 存储搜索历史记录
            // 要求：不要有重复历史记录、最新的排在最前面
            const index=this.searchHistories.indexOf(val)
            if (index !==-1) {
                //证明有这个数据删除这条数据 
                this.searchHistories.splice(index,1)
            }
            // 将这条数据添加到最前面
            this.searchHistories.unshift(val)

            this.isResultShow=true
        },
        onCancel() {//点击取消按钮，触发cancel事件
            this.$toast('取消搜索')
            this.$router.back()
        },
        
    }
  };
</script>

<style scoped lang='less'>
.search-container {
    padding-top: 108px;
	.van-search__action {
		color: #fff;
	}
    .search-form {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
}
</style>